<%--
  Created by IntelliJ IDEA.
  User: 闫光辉
  Date: 2023/4/6
  Time: 20:08
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page isELIgnored="false" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jstl/core_rt" %>
<html>
<head>
    <link href="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script>
    <style>
        .outbox div {
            width: 20%;
            float: left;
            margin-top: 50px;
            margin-left: 30px;
        }

        .outbox {
            width: 100%;
        }

        .box {
            overflow: hidden;
            margin-left: 20px;
        }

        .box img {
            display: inline-block;
            cursor: pointer;
            max-height: 254px;
            max-width: 80%;
            transition: all 2s;
        }

        .box img:hover {
            transform: scale(1.2);
        }
    </style>
</head>
<body>
<div class="outbox">
    <form action="/bgWall/save" method="post" enctype="multipart/form-data">
        <input id="file" type="file" name="img" multiple="multiple">
        <input type="submit" value="提交">
    </form>
    <c:forEach items="${list}" var="bg">
        <div>
            <a class="box" style="text-align: center">
                <img src="${bg.url}" data-bs-toggle="modal" data-bs-target="#myModal" data-src="${bg.url}"
                     class="img-thumbnail" alt="Cinque Terre">
            </a>
            <p style="text-align: center">
                <button type="button" class="btn btn-secondary" style="margin-top: 30px;"><a
                        href="/bgWall/downLoad?url=${bg.url}">下载</a></button>
                <button type="button" class="btn btn-secondary" style="margin-top: 30px"><a
                        href="/bgWall/delete?url=${bg.url}">删除</a></button>
            </p>
        </div>
    </c:forEach>
</div>

<div class="modal fade" id="myModal">
    <div class="modal-dialog" style=" max-width:60% !important;">
        <div class="modal-content">
            <div id="_modalDialog_body" class="modal-body">
                <div id="selectTree" class="ztree" style="height:500px;overflow:auto; ">
                    <img id="img" style="width: 100%;height: 100%;">
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-danger" data-bs-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>
</body>

<script>
    $('#myModal').on('show.bs.modal', function (event) {
        var btnThis = $(event.relatedTarget);
        var modal = $(this);
        var src = btnThis.data('src');
        document.getElementById('img').src = src;

    });
</script>
</html>
